<script setup lang="ts">
import axios from "axios";
import {ref} from "vue";

let index = ref(0);
let keyValue = "";
let mingwen = ref("")
let miwen = ref("")
let caozuo = ref("无操作")

let result = ref("")

function jiaMi() {
  caozuo.value = "加密";
  console.log(index)
  axios({
    method: 'GET',
    url: 'http://localhost:8087/mima/do',
    params: {
      "index": index.value,
      "keyValue": keyValue,
      "type": 0,
      "target": mingwen.value
    }
  }).then(response => {
    mingwen.value = response.data.mingwen
    miwen.value = response.data.miwen
    result.value = "加密成功"
  }, error => {
    result.value = "加密失败<br/>原因:" + error.message
    console.log('错误', error.message)
  })
}

function jieMi() {
  caozuo.value = "解密";
  console.log(index)
  axios({
    method: 'GET',
    url: 'http://localhost:8087/mima/do',
    params: {
      "index": index.value,
      "keyValue": keyValue,
      "type": 1,
      "target": miwen.value
    }
  }).then(response => {
    mingwen.value = response.data.mingwen
    miwen.value = response.data.miwen
    result.value = "解密成功"
  }, error => {
    result.value = "解密失败<br/>原因:" + error.message
    console.log('错误', error.message)
  })
}


</script>

<template>
  <div class="row">
    <div class="col-md-3">请选择加解密的方式</div>
    <select v-model="index" class="col-md-2">
      <option value="0">Playfair</option>
      <option value="1">Vigenere</option>
      <option value="2">ADFGX</option>
    </select>
    <div class="col-md-7">
      <label class="col-md-2">秘钥:</label>
      <input class="col-md-9" v-model="keyValue" placeholder="请输入秘钥"/>
    </div>
  </div>
  <hr/>
  <div class="row" style="margin: 0 10px">
    <div class="col-md-5 mi">
      <h3 style="text-align: center">明文</h3>
      <textarea class="col-md-12" v-model="mingwen"></textarea>
    </div>
    <div class="col-md-2">
      <div class="col-md-12" style="text-align: center;font-size: 20px;border-radius: 2ch; border: 2px solid black">
        当前操作为：<br/>
        {{ caozuo }}
      </div>
      <div class="col-md-12" style="text-align: center;font-size: 20px;border-radius: 1ch; border: 2px solid black">
        操作结果为：<br/>
        {{ result }}
      </div>
      <div>
        <button @click="jiaMi">加密</button>
      </div>
      <hr/>
      <div>
        <button @click="jieMi">解密</button>
      </div>
    </div>
    <div class="col-md-5 mi">
      <h3 style="text-align: center">密文</h3>
      <textarea class="col-md-12" v-model="miwen"></textarea>
    </div>
  </div>
</template>


<style scoped>
input {
  line-height: 50px;
  padding: 0 40px;
  font-size: 20px;
  border-radius: 2ch;
}

textarea {
  height: 420px;
  font-size: 20px;
  background-color: white;
  border-radius: 1ch;
  padding: 20px;
}

.mi {
  height: 500px;
  background-color: #449d44;
  border-radius: 1ch;
  border: 2px solid black;
}

button {
  position: relative;
  top: 150px;
  border-radius: 2ch;
  padding: 10px 50px;
  align-items: center;
  margin-left: 30px;
}

div.col-md-3 {
  line-height: 50px;
  padding: 0 40px;
  font-size: 20px;
}

label {
  line-height: 50px;
  padding: 0 40px;
  font-size: 20px;
}

select {
  padding: 10px;
  font-size: 30px;
  border-radius: 2ch;
}
</style>